<template>
  <div class="app">
    <div class="el-card__body">
      <i data-v-7f1d229e="" class="el-icon-tickets"></i>
      <span data-v-7f1d229e="">收藏列表</span>
    </div>
    <div class="formclass">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="wxclass">
          <el-form-item label="微信号">
            <el-input v-model.trim="form.nickName" width="120"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="tableclass">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
              <img :src="scope.row.image" class="imgs" />
              <img
                slot="reference"
                :src="scope.row.image"
                style="max-height: 50px; max-width: 150px"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="nickName" label="微信号"> </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="deletethis()">移除收藏</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 6, 7, 8]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getCollectList, deleteCollectList } from "../../api/collecttion";
export default {
  data() {
    return {
      tableData: [],
      form: {
        nickName: "",
      },
      multipleSelection: [],
      resultval: [],
      //当前页码
      current: 1,
      //当前条数
      size: 5,
      //总条数
      total: 0,
    };
  },
  methods: {
    //通过用户的id查询收藏列表
    async getcollection(current, size, nickName) {
      let result = await getCollectList(current, size, nickName);

      this.tableData = result.data.collectlist.records;
      this.total = result.data.collectlist.total;
    },

    //查询按钮
    onSubmit() {
      this.getcollection(this.current, this.size, this.form.nickName);
    },
    async deleteCollectbyid() {
      var $this = this;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let result = await deleteCollectList(this.multipleSelection[i]);
        this.resultval.push(result.data.code);
      }
      for (let k = 0; k < this.resultval.length; k++) {
        if (this.resultval[k] === 200) {
          if (k === this.resultval.length - 1) {
            //弹出消息
            $this.$message({
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
          }
        }
      }
      this.getcollection(this.current, this.size, this.form.nickName);
    },
    deletethis() {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteCollectbyid();
          done();
        })
        .catch((_) => {});
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].id);
      }
    },
    handleSizeChange(val) {
      this.size = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.onSubmit();
    },
  },
  created() {
    this.getcollection(this.current, this.size, this.form.nickName);
  },
};
</script>

<style lang="less" scoped>
.el-card__body {
  margin: 20px;
  padding: 20px;
  border: 1px solid #cccc;
  border-radius: 15px;
}
.el-icon-tickets {
  margin: 5px;
}
.tableclass {
  margin: 20px;
}
.wxclass {
  display: flex;
  align-items: center;
}
.imgs {
  height: 160px;
  width: 300px;
}
</style>